
<!doctype html>
<html lang="en">
<head><script type='text/javascript'>window.mod_pagespeed_start = Number(new Date());</script>
<meta charset="UTF-8">
<title></title>
<style type="text/css">body{font-family:sans-serif}.main{border:1px solid #000;box-shadow:10px 10px 5px #888;border-radius:12px;padding:20px;background-color:#ddd;margin:25px;width:450px;margin-left:auto;margin-right:auto}.logo{width:275px;margin-left:auto;margin-right:auto;display:block;padding:15px}.container{-webkit-perspective:300;perspective:300}</style>
</head>
<body>
<div class="main">
<h2>Device Orientation</h2>
<table>
<tr>
<td>Event Supported</td>
<td id="doEvent"></td>
</tr>
<tr>
<td>Tilt Left/Right [tiltLR]</td>
<td id="doTiltLR"></td>
</tr>
<tr>
<td>Tilt Front/Back [tiltFB]</td>
<td id="doTiltFB"></td>
</tr>
<tr>
<td>Direction [direction]</td>
<td id="doDirection"></td>
</tr>
<tr>
<td>Motion Up/Down</td>
<td id="doMotionUD"></td>
</tr>
</table>
</div>
<div class="container" style="-webkit-perspective: 300; perspective: 300;">
<img src="test.jpg" id="imgLogo" class="logo" >
</div>
<script type="text/javascript">init3();var count=0;function init(){if(window.DeviceOrientationEvent){console.log("DeviceOrientation is supported on this device");}else if(window.OrientationEvent){console.log("DeviceOrientation is supported on this device via MozOrientation");}}
function init2(){if(window.DeviceOrientationEvent){window.addEventListener('deviceorientation',devOrientHandler,false);}else if(window.OrientationEvent){window.addEventListener('MozOrientation',mozDevOrientHandler,false);}}
function init3(){if(window.DeviceOrientationEvent){document.getElementById("doEvent").innerHTML="DeviceOrientation";window.addEventListener('deviceorientation',function(eventData){var tiltLR=eventData.gamma;var tiltFB=eventData.beta;var dir=eventData.alpha
var motUD=null;deviceOrientationHandler(tiltLR,tiltFB,dir,motUD);},false);}else if(window.OrientationEvent){document.getElementById("doEvent").innerHTML="MozOrientation";window.addEventListener('MozOrientation',function(eventData){var tiltLR=eventData.x*90;var tiltFB=eventData.y*-90;var dir=null;var motUD=eventData.z;deviceOrientationHandler(tiltLR,tiltFB,dir,motUD);},false);}else{document.getElementById("doEvent").innerHTML="Not supported on your device or browser.  Sorry."}}
function deviceOrientationHandler(tiltLR,tiltFB,dir,motionUD){document.getElementById("doTiltLR").innerHTML=Math.round(tiltLR);document.getElementById("doTiltFB").innerHTML=Math.round(tiltFB);document.getElementById("doDirection").innerHTML=Math.round(dir);document.getElementById("doMotionUD").innerHTML=motionUD;document.getElementById("imgLogo").style.webkitTransform="rotate("+tiltLR+"deg) rotate3d(1,0,0, "+(tiltFB*-1)+"deg)";document.getElementById("imgLogo").style.MozTransform="rotate("+tiltLR+"deg)";document.getElementById("imgLogo").style.transform="rotate("+tiltLR+"deg) rotate3d(1,0,0, "+(tiltFB*-1)+"deg)";}</script>
<script type='text/javascript'>(function(){function g(){var ifr=0;var rpi='';if(window.mod_pagespeed_prefetch_start){rpi+='&nrp='+window.mod_pagespeed_num_resources_prefetched;rpi+='&htmlAt=';rpi+=(window.mod_pagespeed_start-window.mod_pagespeed_prefetch_start);}if(window.parent != window){ifr=1}new Image().src='http://1-ps.googleusercontent.com/beacon?org=61_1_jt&ets=load:'+(Number(new Date())-window.mod_pagespeed_start)+'&ifr='+ifr+''+rpi+'&url='+encodeURIComponent('http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html');window.mod_pagespeed_loaded=true;};var f=window.addEventListener;if(f){f('load',g,false);}else{f=window.attachEvent;if(f){f('onload',g);}}})();</script></body>
</html>